<template>
	<view class="index-page">
		<view class="content ">
			<u-navbar class="header" :is-back="false" :background="{background: '#EFEFEF'}">
				<view class="flex items-center status_bar" style="padding: 0 20rpx 10rpx;">
					<image src="../../static/images/logo.png" mode="heightFix"
						style="height: 78rpx;width: 78rpx;margin-right: 14rpx;"></image>
					<!-- <image src="../../static/images/logo-text.png" mode="heightFix" style="height: 34rpx;"></image> -->
					<text style="font-size: 34rpx;font-weight: bold;line-height: 40rpx;margin-right: 12rpx;">安易融</text>
					<text style="font-size: 28rpx;color: #666;">正规助贷服务平台</text>
				</view>
			</u-navbar>

			<view class="" style="padding: 20rpx;">
				<view class="card-box" style="">
					<view class="" style="text-align: center;color: #ccc;margin-top: 40rpx;">
						最高可融额度(元)
					</view>
					<view class="banner2">200,000</view>

					<view class="" style="margin-top: 64rpx;">
						<button style="background-color: #FFE051;padding: 24rpx;" @click="btnTaphandler" class="btn-nostyle"
							open-type="getPhoneNumber" @getphonenumber="submit">
							立即申请
						</button>
					</view>

				</view>

				<view class="flex items-center" style="margin-top: 42rpx;">
					<view v-if="!isAgree" @click="isAgree = true" class="" style="display: flex;justify-content: center; align-items: center;margin-right: 6rpx;">
						<uni-icons type="circle" size="42rpx"></uni-icons>
					</view>
					<view v-else class="" style="display: flex;justify-content: center; align-items: center;color: #2b99ed; margin-right: 6rpx;">
						<uni-icons type="checkbox" size="42rpx" color="#2b99ed"></uni-icons>
					</view>
					<text style="font-size: 26rpx;"><text @click="isAgree = true">我已阅读并同意</text><text
							@click="useProtocolLink().toUserServicesAgreement()">《用户服务协议》</text> <text
							@click="useProtocolLink().toPrivacyPolicy()">《隐私协议》</text></text>
				</view>

				<view class="" style="margin-top: 28rpx;">
					<button style="background-color: #FFE051;padding: 24rpx;" @click="btnTaphandler" class="btn-nostyle"
						open-type="getPhoneNumber" @getphonenumber="submit">
						立即申请
					</button>
				</view>


				<view class="section_3" style="margin-top: 34rpx;">平台特色</view>
				<view class="section_4">
					<view class="section_4_a">
						<view class="section_4_a_a">
							<view class="section_4_a_a1"></view>
							<view class="section_4_a_a2">信息保密</view>
						</view>
						<view class="section_4_a_b">
							<uni-icons type="wallet-filled" size="50" color="#F08A7B"></uni-icons>
						</view>
					</view>
					<view class="section_4_b">
						<view class="section_4_a_a">
							<view class="section_4_a_a1"></view>
							<view class="section_4_a_a2">快速便捷</view>
						</view>
						<view class="section_4_a_b">
							<uni-icons type="gift-filled" size="50" color="#89DED8"></uni-icons>
						</view>
					</view>
				</view>

				<view class="section_4">
					<view class="section_4_a" style="background-color: #dce3f1">
						<view class="section_4_a_a">
							<view class="section_4_a_a1"></view>
							<view class="section_4_a_a2">产品丰富</view>
						</view>
						<view class="section_4_a_b">
							<uni-icons type="paperplane-filled" size="50" color="#E09232"></uni-icons>
						</view>
					</view>
					<view class="section_4_b" style="background-color: #eeece3">
						<view class="section_4_a_a">
							<view class="section_4_a_a1"></view>
							<view class="section_4_a_a2">使用方便</view>
						</view>
						<view class="section_4_a_b">
							<uni-icons type="vip-filled" size="50" color="#C13E62"></uni-icons>
						</view>
					</view>
				</view>



				<view class=""
					style="background-color: #F6F6F6;padding: 20rpx; border-radius: 18rpx; margin-top: 30rpx;color: #666; font-size: 28rpx;line-height: 46rpx;">
					<text
						style="background-color: #5291FA; color: #fff; border-radius: 6rpx; padding: 4rpx 12rpx; margin-right: 4rpx;">须知</text>
					<text>恒盛融资担保（福州）有限公司竭诚为您须知提供融资相关服务，并通过增信的方式帮助您从银行等金融机构获得融资。在申请过程中，如您对融资金额、费率、合同条款等有任何异议，请您终止相关操作。同时，您也可自行向银行等金融机构申请融资。本平台不向学生提供融资服务。</text>
				</view>
			</view>




			<!-- 		<view class="" style="font-size: 26rpx;color: #bbb; text-align: center; line-height: 50rpx;margin-top: 80rpx;">
				<view class="">
					助贷机构:重庆小康小额贷款有限公司
				</view>
				<view class="">
					资金来源:重庆小康小额贷款有限公司
				</view>
				<view class="">
					温馨提示:贷款额度，放款时间以实际审批为准
				</view>
				<view class="">
					贷款有风险，借款需谨慎
				</view>
				<view class="">
					请根据个人能力合理贷款，理性消费，避免逾期
				</view>
				<view class="">
					公积金相关资料仅作为贷款服务验资证明
				</view>
				<view class="">
					放贷路径与公积金账户无关
				</view>
				<view class="">
					综合年化利率区间(单利)7.2%-24%
				</view>
				<view class="">
					客服热线:4007659879
				</view>
				<view class="" v-if="icp">
					{{ icp }}
				</view>
				<view class="" v-if="appVersion">
					应用版本:{{appVersion}}
				</view>
			</view> -->

			<!-- <text class="title">{{title}}</text>
			<button @click="login">登录</button>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取 手机号</button>-->

		</view>

		<view class="" style="height: 200rpx;">

		</view>

		<view class="gzhxfc" @click="gzgzhHandler" v-if="gzhPageJumpInfo && !isgzhPageJumpInfoClose">
			<view class="flex items-center flex-1" style="width: 100rpx;">
				<view class="gzhlogo" :style="{backgroundImage: `url(${gzhPageJumpInfo.gzhLogo})`}">

				</view>
				<view class="">
					<view class="" style="font-size: 30rpx; font-weight: bold;display: flex;">
						<view class="" style="margin-right: 8rpx;">
							借钱额度审核通知
						</view>
						<view
							style="font-size: 26rpx;font-weight: 400; border: 2rpx solid #fff; border-radius: 12rpx; padding: 6rpx 10rpx; line-height: 1;">
							公众号
						</view>
					</view>
					<view class="" style="font-size: 26rpx;margin-top: 4rpx;">
						关注公众号了解额度调整最新动态
					</view>
				</view>

			</view>
			<view class="" style="background-color: #FC5310;color: #fff; padding: 10rpx 28rpx; border-radius: 8rpx;">
				关注
			</view>

			<view class="close" @click.stop="isgzhPageJumpInfoClose = true">
				<image src="../../static/images/close.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		loginApi
	} from '../../api/user'
	import {
		gzhPageJumpInfoApi
	} from '../../api/config'
	import {
		h5Url
	} from '../../configs/env.config'
	import {
		useProtocolLink
	} from '../../configs/protocol_link'
	import {
		getChannelCode
	} from '../../utils/request'

	export default {
		data() {
			return {
				title: 'Hello',
				isAgree: false,
				appVersion: '',
				icp: '渝ICP备18000384号-1',
				gzhPageJumpInfo: undefined,
				isgzhPageJumpInfoClose: false,
			}
		},
		onLoad() {
			this.initData()

		},
		methods: {
			useProtocolLink,
			// 协议是否同意改变事件
			argementChange(val) {
				this.ischeckArg = !!(val.detail.value[0]);
			},
			async initData() {
				const res = await uni.getSystemInfo()
				const appVersion = res.appVersion
				// #ifdef MP-WEIXIN
				const {
					miniProgram
				} = wx.getAccountInfoSync()
				this.appVersion = miniProgram.version || appVersion
				// #endif
				if (!this.appVersion) this.appVersion = appVersion

				this.initConfigData()


				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function (res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	},
				// 	fail: function (res) {
				// 		console.log('当前位置失败：',res);
				// 	}
				// });

			},
			async initConfigData() {
				const res = await gzhPageJumpInfoApi()
				this.gzhPageJumpInfo = res.data
			},
			gzgzhHandler() {
				uni.navigateTo({
					url: `/pages/gzh/gzh`
				})
			},
			async submit(e) {
				uni.hideLoading()
				console.log(e)
				console.log(e.detail.code) // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno) // 错误码（失败时返回）

				const channelCode = await getChannelCode()

				if (e.type !== 'getphonenumber') return;
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					console.log('用户拒绝了')
					const h5UrlHandler = `${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}`

					uni.navigateTo({
						url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
					})
					return;
				}

				const mobileCode = e.detail.code;


				// uni.showLoading()

				const loginCode = await this.loginCodeGet()

				// console.log({
				// 	loginType: 8,
				// 	mobile: mobileCode,
				// 	loginCode: loginCode
				// })
				// return;

				const res = await loginApi({
					loginType: 8,
					mobile: mobileCode,
					loginCode: loginCode
				})
				const token = res.data.token
				const h5UrlHandler = `${h5Url}/?ch=${channelCode}&deviceId=${uni.getDeviceInfo().deviceId}&token=${token}`

				uni.navigateTo({
					url: `/pages/webview/webview?url=${encodeURIComponent(h5UrlHandler)}`
				})

				console.log(res)
			},
			loginCodeGet() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(loginRes) {
							resolve(loginRes.code)
						},
						fail: reject
					})
				})
			},
			btnTaphandler() {
				this.isAgree = true
				uni.showLoading()
			}
		}
	}
</script>

<style lang="scss">
	.section_3 {
		font-size: 35rpx;
		margin-left: 25rpx;
		margin-top: 20rpx;
	}

	.section_4 {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.section_4_a {
			width: 350rpx;
			height: 180rpx;
			background-color: #fdefef;
			display: flex;
			flex-direction: row;
			border-radius: 15rpx;
			font-size: 26rpx;
			margin-right: 18rpx;

			.section_4_a_a {
				display: flex;
				flex-direction: column;
				margin-top: 35rpx;

				.section_4_a_a1 {
					display: flex;
					flex-direction: row;

					.section_4_a_a1_a {
						color: red;
						margin-left: 40rpx;
					}

					.section_4_a_a1_b {}

					.section_4_a_a1_c {
						color: red;
						font-size: 20rpx;
						border: 1 solid red;
						border-radius: 15rpx;
						margin-left: 10rpx;
						margin-top: 2rpx;
					}
				}

				.section_4_a_a2 {
					margin-top: 25rpx;
					margin-left: 40rpx;
				}
			}

			.section_4_a_b {
				margin-top: 35rpx;
				margin-left: 35rpx;
			}
		}

		.section_4_b {
			width: 350rpx;
			height: 180rpx;
			background-color: #e9f7f7;
			display: flex;
			flex-direction: row;
			border-radius: 15rpx;
			font-size: 26rpx;

			.section_4_a_a {
				display: flex;
				flex-direction: column;
				margin-top: 35rpx;

				.section_4_a_a1 {
					display: flex;
					flex-direction: row;

					.section_4_a_a1_a {
						color: red;
						margin-left: 40rpx;
					}

					.section_4_a_a1_b {}

					.section_4_a_a1_c {
						color: #89ded8;
						font-size: 20rpx;
						border: 1 solid red;
						border-radius: 15rpx;
						margin-left: 10rpx;
						margin-top: 2rpx;
					}
				}

				.section_4_a_a2 {
					margin-top: 25rpx;
					margin-left: 40rpx;
				}
			}

			.section_4_a_b {
				margin-top: 35rpx;
				margin-left: 35rpx;
			}
		}
	}

	// public
	.rigister-split {
		text {
			color: #2b99ed;
		}
	}

	.apply-term {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.banner2 {
		color: white;
		font-size: 80rpx;
		font-weight: 700;
		text-align: center;
		margin-top: 34rpx;
	}

	.gzhxfc {
		position: fixed;
		width: 90%;
		left: 5%;
		box-sizing: border-box;
		bottom: 60rpx;
		background-color: #1AAAF7;
		display: flex;
		color: #fff;
		align-items: center;
		padding: 30rpx 30rpx;
		border-radius: 16rpx;
		z-index: 10;
		box-shadow: 0px 10px 15px -3px rgba(125, 125, 125, .4);

		.gzhlogo {
			width: 70rpx;
			min-width: 70rpx;
			height: 70rpx;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			border-radius: 14rpx;
			margin-right: 18rpx;
		}

		.close {
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			background-color: #fff;
			border-radius: 9999rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.header {
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.index-page {
		position: relative;

		.bg-image {
			position: absolute;
			z-index: 0;
			width: 100%;
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.card-box {
			background: #383844;
			background-size: 100% 100%;
			min-height: 340rpx;
			padding: 40rpx 40rpx 80rpx;
			color: #fff;
			border-radius: 22rpx;
		}

	}
</style>